.calendar_title{
    display: flex;
    width: 70%; 
    margin: 10rpx auto; 
    justify-content: space-between;
    font-size: 40rpx;
    color: #fff;}
.calendar_title .icon image{
    color: #ccc;
    width: 50rpx; 
    height: 50rpx;
    margin: 40rpx auto;}

.dateeee{
    color: var(--themeColor);
    margin: 40rpx auto;
}

/* 日历 */
.calendar{
    width: 100%;
    margin-top: 10rpx;
    background: #fff;
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    border-bottom: 1px solid #D0D0D0;
    padding: 0 0 20rpx;
    font-family: FZZhunYuan-M02S;}
.header{
    font-size: 0;
    // width: 90%;
    margin: 0 auto;}
.header>view{
    display: inline-block;
    width: 14.285%;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    border-top: 1px solid #D0D0D0;
    padding: 20rpx 0;}
.weekMark{
    position: relative;
    width: 80%;
    margin: 0 auto;}
.weekMark view{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px solid var(--themeColor);}
.date-box{
    font-size: 0;
    padding: 10rpx 0;
    // width: 90%;
    margin: 0 auto;}
.date-box>view{
    position: relative;
    display: inline-block;
    width: 14.285%;
    margin-top: 20rpx;
    color: #666;
    text-align: center;
    vertical-align: middle;}
.date-head{
    height: 80rpx;
    line-height: 60rpx;
    font-size: 28rpx;}
.nowDay .date-head{
    width: 60rpx;
    height: 60rpx;
    margin: 0 auto;
;}
.nowDay .date-num{
    width: 60rpx;
    border-radius: 50%;
    text-align: center;
    color: var(--themeColor);
    // background-color: var(--themeColor);
    border: 1rpx solid var(--themeColor);
    margin: -20rpx auto;}


.date-head .isInPeriodList{
    width: 50rpx;
    height: 15rpx;
    border-radius: 10rpx;
    // width: 72rpx;
    // height: 12rpx;
    // border-radius:50% ;
    margin: 6rpx auto 0;
    background-color: var(--themeColor);
}
.nowDay .date-head .isInPeriodList{

    width: 50rpx;
    height: 15rpx;
    border-radius: 10rpx;
    margin: 24rpx auto 0;
    background-color: var(--themeColor);
}

.date-head .isInOvulationPeriod{
    width: 12rpx;
    height: 12rpx;
    border-radius:50% ;
    margin: 6rpx auto 0;
    background-color: purple;
}

.date-head .isInPredictPeriod{
    width: 12rpx;
    height: 12rpx;
    border-radius:50% ;
    margin: 6rpx auto 0;
    background-color: pink;
}


.nowDay .date-head .istoday{
    // text-align: center;  
    margin-top: -9rpx;
    font-size: 18rpx;
    color: var(--themeColor);
}


.date-mark{
    display: flex;
    margin: 40rpx 0 10rpx 0;
    .period{
        margin-left: 40rpx;
        display: flex;
        align-items: center;
        .view1{
            background-color: var(--themeColor);
            width: 50rpx;
            height: 15rpx;
            border-radius: 10rpx;
        }
        .view2{
            margin-left: 5rpx;
            color: var(--themeColor);
        }
    }

    .periodForcast{
        margin-left: 80rpx;
        display: flex;
        align-items: center;
        .view1{
            background-color: pink;
            width: 10rpx;
            height: 10rpx;
            border-radius: 10rpx;
        }
        .view2{
            margin-left: 5rpx;
            color: pink;
        }
    }

    .ovulation{
        margin-left: 80rpx;
        display: flex;
        align-items: center;
        .view1{
            background-color: purple;
            width: 10rpx;
            height: 10rpx;
            border-radius: 10rpx;
        }
        .view2{
            margin-left: 5rpx;
            color: purple;
        }
    }
    
}
